<template>
  <div id="app">
    <!-- <div class="bottom" v-if="isShow">
      <span>
        <router-link to="/" class="nav-item">
          <i class="icon1"></i>
          主页
        </router-link>
      </span>
      <span>
        <router-link to="/about" class="nav-item">
          <i class="icon2"></i>
          书架
        </router-link>
      </span>

      <span>
        <router-link to="/collection" class="nav-item">
          <i class="icon3"></i>
          活动
        </router-link>
      </span>

      <span>
        <router-link to="/geren" class="nav-item">
          <i class="icon4"></i>
          我的
        </router-link>
      </span>
    </div>
  </div> -->
  <router-view></router-view>
  </div>
  <!-- 重构代码 -->
</template>
<style lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

#app {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  text-align: center;
  color: #2c3e50;
  background-image: url(./img/bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
}
</style>

<!-- <style lang="less">
 .icon1,
 .icon2,
 .icon3,
 .icon4 {
   background-size: cover;
   width: 20px;
   height: 20px;
   margin-bottom: 5px;
 }
 .icon1 {
   background-image: url(./img/shouye.png);
 }
 .icon2 {
   background-image: url(./img/shujia.png);
 }
 .icon3 {
   background-image: url(./img/collection.png);
 }
 .icon4 {
   background-image: url(./img/geren.png);
 }
 .nav-item.router-link-exact-active .icon1 {
   background-image: url(./img/shouye_active.png);
 }
 .nav-item.router-link-exact-active .icon2 {
   background-image: url(./img/shujia_active.png);
 }
 .nav-item.router-link-exact-active .icon3 {
   background-image: url(./img/collection_active.png);
 }
 .nav-item.router-link-exact-active .icon4 {
   background-image: url(./img/geren_active.png);
 }
 #app {
   text-align: center;
   color: #2c3e50;
   background-image: url(./img/bg.jpg);
   background-repeat: no-repeat;
   background-size: cover;
   width: 100vw;
 }
 .bottom {
   background-color: #ffffff;
   border-top: #ffd89c 1px solid;
   width: 110vw;
   bottom: 60px;
   transform: translate(-5%);
   height: 60px;
   position: fixed;
   display: flex;
   bottom: 0px;
   z-index: 100;
   .nav-item {
     font-weight: bold;
     color: #8b8b8b;
     text-decoration: none;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     &.router-link-exact-active {
       color: #ff9807;
     }
   }
   span {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     flex-grow: 1;
   }
   span {
     font-size: 14px;
   }
 }
</style> -->

<script>

export default {
  data() {
    return {
      msg: 'Hello Vue!',
    };
  },
  mounted(){
    document.title="辣椒小说";
  }
};
</script>